window.onload = function() {
    var picnav = document.getElementsByClassName("picture-nav");
    var ul = picnav.getElementsByTagName("ul");
    var li = ul.getElementsByTagName("li"); //获取picnav下的li标签的dom 以便对下标的操作
    var banner = document.getElementsByClassName("banner");
    var div = banner.getElementsByTagName("div"); //获取banner下的的div图片区dom

    for (var i = 0; i < li.length; i++) { //获取所有i编号的元素
        li[i].index = i; //定义一个index属性对li进行编号
        li[i].onclick = function() { //再注册一个点击事件，当点击的时候所有标签都恢复最初状态
            for (var n = 0; n < li.length; n++) { //这步是相对于未被点击部分的样式
                li[n].className = "";
                div[n].className = "hidden";
            }
            this.className = "on"; //再对点击事件添加相应的属性
            div[this.index].className = ""; //通过之前的index编号绑定的指定div
        }
    }
}